package com.example.inventoryapp.ui.home

// 导入依赖,所有必要的Compose UI、Material组件和自定义类
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.inventoryapp.InventoryTopAppBar
import com.example.inventoryapp.R
import com.example.inventoryapp.data.Item
import com.example.inventoryapp.ui.item.formatedPrice
import com.example.inventoryapp.ui.navigation.NavigationDestination
import com.example.inventoryapp.ui.theme.InventoryAppTheme


/**
 * 首页导航目标定义
 * 功能：定义首页的路由和标题资源ID
 * route：唯一标识符"home"
 * titleRes：显示在顶部栏的应用名称（来自strings.xml）
 */
object HomeDestination : NavigationDestination {
    override val route = "home"

    override val titleRes = R.string.app_name
}

/**
 * 首页主组件 - HomeScreen
 * 功能详解：
 * 1.顶部应用栏：
 * 使用自定义的InventoryTopAppBar
 * 显示应用名称（从资源文件获取）
 * 不显示返回按钮（canNavigateBack = false）
 * 支持滚动行为（与内容联动）
 * 2.浮动操作按钮(FAB)：
 * 点击时触发navigateToItemEntry回调
 * 使用"+"图标表示添加新物品
 * 添加适当的内边距
 * 3.内容区域：
 * 使用HomeBody组件显示主要内容
 * 传递Scaffold提供的innerPadding确保内容不被遮挡
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
    navigateToItemEntry: () -> Unit,  // 导航到添加物品页面的回调
    navigateToItemUpdate: (Int) -> Unit,  // 导航到物品详情页面的回调（带物品ID）
    modifier: Modifier = Modifier
) {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()  // 顶部栏滚动行为

    Scaffold(
        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            InventoryTopAppBar(  // 自定义顶部栏
                title = stringResource(HomeDestination.titleRes),
                canNavigateBack = false,  // 首页不显示返回按钮
                scrollBehavior = scrollBehavior
            )
        },
        floatingActionButton = {
            FloatingActionButton(  // 右下角浮动按钮
                onClick = navigateToItemEntry,
                shape = MaterialTheme.shapes.medium,
                modifier = Modifier.padding(dimensionResource(id = R.dimen.padding_large))
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = stringResource(R.string.item_entry_title)
                )
            }
        }
    ) {  innerPadding ->
        HomeBody(  // 首页主体内容
            itemList = listOf(),  // 空列表（实际应用会传入数据）
            onItemClick = navigateToItemUpdate,  // 点击物品回调
            modifier = modifier.fillMaxSize(),
            contentPadding = innerPadding  // Scaffold的内边距
        )
    }
}

/**
 * 首页主体 - HomeBody
 * 功能详解：
 * 1.空状态处理：
 * 当物品列表为空时显示提示文本
 * 文本居中显示，使用大标题样式
 * 2.列表显示：
 * 当有物品时显示InventoryList
 * 将点击回调转换为传递物品ID
 */
@Composable
private fun HomeBody(
    itemList: List<Item>,  // 物品列表
    onItemClick: (Int) -> Unit,  // 物品点击回调（传递物品ID）
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp)
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier,
    ) {
        if (itemList.isEmpty()) {
            // 空状态提示
            Text(
                text = stringResource(R.string.no_item_description),
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.titleLarge,
                modifier = Modifier.padding(contentPadding)
            )
        } else {
            // 显示物品列表
            InventoryList(
                itemList = itemList,
                onItemClick = { onItemClick(it.id) },  // 转换为传递ID
                contentPadding = contentPadding,
                modifier = Modifier.padding(horizontal = dimensionResource(R.dimen.padding_small))
            )
        }
    }
}

/**
 * 物品列表 - InventoryList
 * 功能详解：
 * 1.高效列表渲染：
 * 使用LazyColumn只渲染可见项
 * 为每个物品设置唯一key（物品ID）提高重组效率
 * 2.点击交互：
 * 整个物品项可点击
 * 点击时传递整个物品对象
 */
@Composable
private fun InventoryList(
    itemList: List<Item>,
    onItemClick: (Item) -> Unit,  // 点击整个物品项
    contentPadding: PaddingValues,
    modifier: Modifier = Modifier
) {
    LazyColumn(  // 惰性列（高效处理长列表）
        modifier = modifier,
        contentPadding = contentPadding
    ) {
        items(items = itemList, key = { it.id }) { item ->  // 按ID设置key
            InventoryItem(item = item,
                modifier = Modifier
                    .padding(dimensionResource(R.dimen.padding_small))
                    .clickable { onItemClick(item) }  // 点击事件
                )
        }
    }
}

/**
 * 单个物品项 - InventoryItem
 * 功能详解：
 * 1.卡片布局：
 * 使用Card组件提供视觉层次感
 * 添加阴影提升立体感
 * 2.内容布局：
 * 名称左对齐，价格右对齐
 * 使用Spacer和weight实现自适应布局
 * 库存数量显示在第二行
 * 3.格式化显示：
 * 使用formatedPrice()格式化价格显示
 * 使用stringResource本地化库存文本
 */
@Composable
private fun InventoryItem(
    item: Item, modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier,
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Column(
            modifier = Modifier.padding(dimensionResource(R.dimen.padding_large)),
            verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small))
        ) {
            // 第一行：名称和价格
            Row(
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = item.name,
                    style = MaterialTheme.typography.titleLarge,
                )
                Spacer(Modifier.weight(1f))
                Text(
                    text = item.formatedPrice(),
                    style = MaterialTheme.typography.titleMedium
                )
            }
            // 第二行：库存数量
            Text(
                text = stringResource(R.string.in_stock, item.quantity),
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

/* 预览有数据的首页 */
@Preview(showBackground = true)
@Composable
fun HomeBodyPreview() {
    InventoryAppTheme {
        HomeBody(
            listOf(
                Item(1, "Game", 100.0, 20),
                Item(2, "pen", 200.0, 30),
                Item(3, "TV", 300.0, 50)
            ),
            onItemClick = {})
    }
}

/* 预览空列表状态 */
@Preview(showBackground = true)
@Composable
fun HomeBodyEmptyListPreview() {
    InventoryAppTheme {
        HomeBody(listOf(), onItemClick = {})
    }
}

/* 预览单个物品项 */
@Preview(showBackground = true)
@Composable
fun InventoryItemPreview() {
    InventoryAppTheme {
        InventoryItem(
            Item(1, "Game", 100.0, 20)
        )
    }
}

/**
 * 关键设计特点：
 * 状态驱动UI：
 * 根据itemList是否为空显示不同内容
 * 数据变化自动更新界面
 * 高效列表处理：
 * 使用LazyColumn只渲染可见项
 * 为每个物品设置唯一key（ID）提高重组效率
 * 组件化结构：
 * 将屏幕拆分为多个可复用组件（HomeBody/InventoryList/InventoryItem）
 * 符合单一职责原则
 * 响应式布局：
 * 使用Spacer(Modifier.weight(1f))实现自适应布局
 * 价格信息右对齐
 * 交互反馈：
 * 卡片悬停效果（elevation）
 * 点击波纹效果（clickable modifier）
 * 国际化支持：
 * 使用stringResource获取本地化字符串
 * 包含占位符的字符串资源（如"in_stock"）
 * 无障碍支持：
 * 为图标添加内容描述（contentDescription）
 *
 * 关键设计特点
 * 1.响应式布局：
 * 自动适应不同屏幕尺寸
 * 使用Spacer和weight实现灵活的空间分配
 * 2.状态驱动UI：
 * 根据物品列表是否为空显示不同内容
 * 数据变化自动更新界面
 * 3.高效渲染：
 * 使用LazyColumn优化长列表性能
 * 为列表项设置唯一key提高重组效率
 * 4.交互反馈：
 * 卡片悬停效果（elevation）
 * 点击波纹效果（clickable modifier）
 * 5.国际化支持：
 * 使用stringResource获取本地化字符串
 * 包含占位符的字符串资源（如"in_stock"）
 * 6.无障碍设计：
 * 为图标添加内容描述
 * 确保屏幕阅读器能正确识别界面元素
 *
 *
 * 实际应用时需要
 * 1.数据连接：
 * 将itemList = listOf()替换为ViewModel提供的状态
 * 使用collectAsState()观察数据变化
 * 2.加载状态：
 * 添加加载指示器（当数据加载中时）
 * 处理错误状态显示
 * 3.分页/刷新：
 * 添加下拉刷新功能
 * 实现分页加载更多
 * 这个首页设计提供了清晰的信息展示和直观的用户交互，是应用的核心界面之一。通过合理的组件划分和状态管理，
 * 确保了界面的响应性和可维护性。
 */